<template>
	<div class="column-list">
		<div class="column-item-box" v-for="(item, index) of list" :key="index">
			<div class="item-right">
				<img :src="item.coverpic" :alt="item.title" />
			</div>
			<div class="item-left ml10">
				<h3>{{ item.title }}</h3>
				<div class="summary">{{ item.summary }}</div>
				<p class="meta-data">
					作者:{{ item.author }}&nbsp; 时间:{{ item.createTime }}&nbsp;
					浏览量:{{ item.views }}
				</p>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";

interface ColumnItemProps {
	title: string;
	summary?: string;
	author: string;
	coverpic: string;
	createTime: string;
	views: number | string;
}

const ColummList = defineComponent({
	name: "ColummList",
	// 已启用类型推断
	props: {
		list: {
			type: Array as PropType<ColumnItemProps[]>,
			required: true,
		},
	},
});

export default ColummList;
</script>

<style lang="scss">
.column-list {
	.column-item-box {
		display: flex;
		height: 130px;
		margin-bottom: 22px;
		border-bottom: 1px solid rgba(28, 31, 33, 0.1);
		padding: 4px 0;
		transition: background-color 0.5s;
		&:hover {
			background: rgb(236 234 234 / 40%);
		}
	}
	.item-right {
		img {
			width: 100%;
			height: 120px;
			border-radius: 5px;
		}
	}
	.summary {
		color: #888;
		font-size: 14px;
		margin: 10px 0;
	}
	.meta-data {
		color: #888;
		font-size: 14px;
	}
}
</style>